<template>
  <!-- 下拉筛选 -->
  <van-dropdown-menu v-if="evalCycleNperList.length">
    <van-dropdown-item :title="nperDesc" ref="cycleNper">
      <van-cell
        v-for="item in evalCycleNperList"
        :key="item.nperId"
        :title="`${item.desc}（${evaluationState(item.evaluationState)}）`"
        @click="onChangeNper(item)">
        <van-icon v-show="item.nperId === nperId" name="success" />
      </van-cell>
    </van-dropdown-item>
    <van-dropdown-item :title="nperUser" ref="cycleNperUser" v-if="currEvalCycle.evaluationState === '1'">
      <van-cell
        v-for="item in evalChainInfoList"
        :key="item.id"
        :title="`${item.userName}（${evaluationState1(item.evaluationState)}）`"
        @click="onChangeEvalChainInfo(item)">
        <van-icon v-show="item.id === evalChainInfoId" name="success" />
      </van-cell>
    </van-dropdown-item>
  </van-dropdown-menu>
</template>
<script>
import { getEvalCycleNper, getEvalChainUser } from '../common/common.js'
import { listEvaulationCycleNper, listEvaulationedChainInfo } from '@api/api-task.js'

export default {
  name: 'EvaluateMenu',
  components: {},
  props: {
    // 任务详情
    taskId: {
      type: String,
      default: '',
    },
    /* 是否优先展示已完成的 */
    showCompleted: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      evalCycleNperList: [], // 周期选择
      evalChainInfoList: [], // 评价链人员
      currEvalCycle: {}, // 选中的周期
      evalChainJson: {}, // 选中的评价人
      nperId: '', // 周期id
      evalChainInfoId: '', // 评价链领导数据id
    }
  },
  computed: {
    evaluationState() {
      return data => {
        return getEvalCycleNper(data)
      }
    },
    evaluationState1() {
      return data => {
        return getEvalChainUser(data)
      }
    },
    /* 下拉周期显示内容 */
    nperDesc() {
      const { desc = '', evaluationState = '' } = this.currEvalCycle
      return `${desc}（${this.evaluationState(evaluationState)}）`
    },
    /* 下拉周期显示内容 */
    nperUser() {
      const { userName = '', evaluationState = '' } = this.evalChainJson
      return `${userName}（${this.evaluationState1(evaluationState)}）`
    },
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    /* 获取评价周期 */
    async initEvalCycleNper() {
      const { data = [] } = await listEvaulationCycleNper({ taskId: this.taskId })
      // 第一条为最新的评价周期
      this.evalCycleNperList = data
      if (this.evalCycleNperList.length) {
        this.currEvalCycle = this.evalCycleNperList[this.evalCycleNperList.length - 1]
        this.initEvalChainInfo()
      }
    },
    /* 获取评价链人员 */
    async initEvalChainInfo() {
      const { nperId = '' } = this.currEvalCycle
      this.nperId = nperId

      const { data = [] } = await listEvaulationedChainInfo({ taskId: this.taskId, nperId: this.nperId })
      /* 只展示已评价完成的人员数据，默认展示第一条数据 */
      this.evalChainInfoList = data
      let lastIndex = 0
      if (this.showCompleted) {
        const evalFin = this.evalChainInfoList.filter(item => item.evaluationState === '2') // 筛选出已完成的
        lastIndex = evalFin.length ? evalFin.length - 1 : this.evalChainInfoList.length - 1
      } else {
        lastIndex = this.evalChainInfoList.length - 1
      }
      this.evalChainJson = this.evalChainInfoList[lastIndex]
      this.dealEvalChainInfo()
    },
    /* 监听评价链人员切换 */
    onChangeEvalChainInfo(item) {
      this.evalChainJson = { ...item }
      this.$refs.cycleNperUser.toggle()
      this.dealEvalChainInfo()
    },
    /* 监听周期切换 */
    onChangeNper(item) {
      // this.currEvalCycle = this.evalCycleNperList.find(item => item.nperId === this.nperId)
      this.currEvalCycle = { ...item }
      this.evalChainInfoId = ''
      this.$refs.cycleNper.toggle()
      this.initEvalChainInfo()
    },
    /* 抛出选中的评价人相关数据 */
    dealEvalChainInfo() {
      this.evalChainInfoId = this.evalChainJson.id
      this.$set(this.evalChainJson, 'nperId', this.nperId)
      this.$emit('getEvalResult', this.evalChainJson)
    },
  },
}
</script>
<style lang="scss" scoped>
/deep/.van-dropdown-menu__bar {
  box-shadow: none;
}
/deep/.van-cell {
  padding: 10px 16px;
}
/deep/.van-cell__value {
  flex: 0.1;
  i {
    color: #d81e06;
  }
}
</style>
